import styled from 'styled-components'
import logoPic from '../../statics/logo.png'
export const LoginWrapper = styled.div`
    height: 100%;
    min-height: 750px;
    text-align: center;
    background-color: #f1f1f1; 
`;
export const Logo = styled.div`

    width: 180px;
    height: 110px;
    cursor: pointer;
    background: url(${ logoPic }) no-repeat;
    position: absolute;
    left: 10px;
    top: 28px;
    background-size: contain;
`;
export const LoginMain = styled.div`
    position: relative;
    width: 400px;
    height: 500px;
    margin: 80px auto ;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    display: inline-block;
    .name{
        border-radius: 4px 4px 0 0;
    }
    .pwd{
        border-radius: 0 0 4px 4px;;
    }
    .user-icon{
        position: absolute;
        left: 60px;
        top: 171px;
    }
    .lock-icon{
        position: absolute;
        left: 60px;
        top: 221px;
    }
    .check-box{
        width: 13px;
        height: 13px;
        position: absolute;
        left: 52px;
        top: 270px;
    }
    .remmber-me{
        position: absolute;
        left: 70px;
        top: 266px;
        font-size: 15px;
        color: #969696;
    }
    .forget-btn{
        position: absolute;
        right: 43px;
        top: 266px;
        font-size: 14px;
        color: #999; 
        cursor: pointer;
    }
`;
export const Title = styled.div`
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 60px;
    .sign-in{
     color: #ea6f5a;
     border-bottom: 2px solid #ea6f5a;
     padding: 10px;
     cursor: pointer;
    }
    .title-b{
      padding: 10px;
      color: #969696;
    }
    .sign-up{
     padding: 10px;
     color: #969696;
     cursor: pointer;
    }
    
`;
export const Input = styled.input`
    width: 300px;
    height: 50px;
    border-bottom: none;
    padding: 10px 12px 4px 35px;
    border: 1px solid #c8c8c8;
    background-color: hsla(0,0%,71%,.1);
    outline: none;
`;
export const Button = styled.button`
   background: #3194d0;
   font-size: 18px;
   height: 43px;
   width: 100%;
   border: none;
   border-radius: 25px;
   color: #fff;
   cursor: pointer;
   outline: none;
   margin-top: 52px;
`;
export const MoreSign = styled.div`
   width: 100%;
   margin-top: 50px;
   position: relative;
   h6{
    margin: 0 0 10px;
    font-size: 12px;
    color: #b5b5b5;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
   }
   h6::before{
    content: "";
    border-top: 1px solid #b5b5b5;
    display: block;
    position: absolute;
    width: 60px;
    top: 5px;
    left: 25px
   }
   h6::after{
      right: 25px;
      content: "";
      border-top: 1px solid #b5b5b5;
      display: block;
      position: absolute;
      width: 60px;
      top: 5px;
   }
   .weibo-link{
     font-size: 30px;
     padding: 20px;
     cursor: pointer;
   }
   .wechat-link{
      font-size: 30px;
      padding: 20px;
      cursor: pointer;
    }
    .qq-link{
      font-size: 30px;
      padding: 20px; 
      cursor: pointer;
    }
    .other{
       color: #999;
       font-size: 13px;
       margin: 0 10px 20px 10px;
       font-weight:700;
       cursor: pointer;
    }
`;